<html>
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Meteor-关于我的梦想</title>
    <link rel="stylesheet" href="../static/newCss/animate.css" th:href="@{/newCss/animate.css}"/>
    <link rel="stylesheet" href="../static/newCss/layui.css" th:href="@{/newCss/layui.css}">
    <link rel="stylesheet" href="../static/newCss/semantic.css" th:href="@{/newCss/semantic.css}">
    <link rel="stylesheet" href="../static/newCss/Blog-nav.css" th:href="@{/newCss/Blog-nav.css}">
    <link rel="stylesheet" href="../static/newCss/MyStyle.css" th:href="@{/newCss/MyStyle.css}">
    <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}"/>
    <link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}"/>
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}"/>
    <link rel="stylesheet" href="../static/newCss/blogStyle.css" th:href="@{/newCss/blogStyle.css}"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"/>
    <link rel="stylesheet" href="../static/newCss/APlayer.min.css" th:href="@{/newCss/APlayer.min.css}">
    <style>
        body {
            background-color: #fcfcfc;
        }

        .h-body-bottom {
            margin: auto;
            margin-top: 66px;
        }

        .h-boder-radius {
            border-radius: 10px !important;
        }

        .h-box-margin-left {
            margin-left: 10px;
        }
    </style>
</head>
<body>
<!-- 导航 -->
<div class="ui top fixed menu">
    <nav class="h-shadow-small ui attached segment h-padded-td-mini">
        <!-- 滚轮进度条 -->
        <div class="ui bottom indicating attached  progress" data-value="1" data-total="100" id="example4">
            <div class="bar"></div>
        </div>
        <div class="ui secondary stackable menu ">
            <h2 class="ui left header item">
                <div class="content"><span style="font-size: 20px">Meteor</span></div>
            </h2>
            <div class="item  h-item h-moblile-hide">
                <div class="ui item  category search">
                    <div class="ui  icon input">
                        <input class="prompt" type="text" placeholder="搜索文章" id="Search_for_articles">
                        <i class="search link icon" id="search_blog_btn"></i>
                    </div>
                    <div class="results"></div>
                </div>
            </div>

            <a th:href="@{/1}" href="#" class="h-item item h-moblile-hide Navbtn" th:classappend="${n==1} ? 'active'"><i class="home icon"></i>首页</a>

            <a th:href="@{/types}" href="#" class="h-item item h-moblile-hide  Navbtn" th:classappend="${n==2} ? 'active'"><i class="tags icon"></i>标签</a>

            <a th:href="@{/time}" href="#" class="h-item item h-moblile-hide  Navbtn" th:classappend="${n==3} ? 'active'"><i
                    class="calendar alternate icon"></i>归档</a>

            <a href="javascript:alert('开发中')" class="h-item item h-moblile-hide Navbtn"><i
                    class="linkify icon" th:classappend="${n==4} ? 'active'"></i>未知</a>

            <a th:href="@{/aboutMe}" class="h-item item h-moblile-hide  Navbtn"><i
                    class="address card outline icon" th:classappend="${n==5} ? 'active'"></i>关于我</a>

            <a th:href="@{/dream}" class="active h-item item h-moblile-hide  Navbtn"><i
                    class="paper plane outline icon" th:classappend="${n==6} ? 'active'"></i>关于梦想</a>

            <!--            <a th:href="@{/toLogin}" class="h-item item h-moblile-hide  Navbtn"><i class="arrow circle right icon"></i>后台登录</a>-->

        </div>
        <a href="#" class="ui icon button h-right-top-storage h-moblile-show" id="stackable-hide"
           style="background-color: #ffffff;">
            <i class="sidebar icon"></i>
        </a>
    </nav>
</div>

<!-- 	主体 -->
<div class="h-body-bottom h-padded-td-big animate__animated animate__fadeIn" id="blogbody">
    <div class="ui container">
        <!-- 头部 -->
        <div class="ui top attached">
            <div class="ui mini horizontal link list">
                <div class="item">
                    <div class="content">
                        <span class="header"><i class="user outline red icon"></i>&nbsp;Meteor</span>
                    </div>
                </div>
                <div class="item">
                    <i class="eye green icon"></i>&nbsp;3326
                </div>
                <div class="item">
                    <i class="edit blue icon"></i>&nbsp;2022-06-29 18:11:17
                </div>
                <div class="item">
                    <i class="comment alternate outline orange icon"></i>&nbsp;4
                </div>
            </div>
        </div>
        <!-- 	内容 -->
        <div class="ui  segment h-boder-radius">
            <!-- 文章内容 -->
            <div id="content" class="typo typo-selection js-toc-content h-padded-lr"><h2 id="关于我">😎 About Me</h2>
                <hr>
                <p>我是Meteor,一名准备升大二的学生，一个菜🐔，想要努力冲进华为！
                    <br>
                    技术方向主要是Java后端开发，喜欢思考、热爱生活、经常运动.
                    <br>
                    开发这个博客主要是为了分享知识内容以及记录我的生活,同时也将自己的技术进行检验与提高，会不断更新博客.
                    <br>
                    此时浏览这段话的你也知道，学习是一件极其枯燥而无聊的过程，要走的路还很远,唯有坚持与拼搏！</p>
                <h2 id="梦想">😴 梦想</h2>
                <p>
                    我想每一个人从小时候就有过自己的梦想，只是在成长的过程中，有些梦想落在了路上。
                    <br>
                    我的梦想很平庸：
                    <br>
                    ①成为一名光荣的共产党员
                    <br>
                    ②拿到保研名额
                    <br>
                    ③毕业了冲进华为（或者其它大厂吧）
                    <br>
                    ④拥有一辆一百万以内的跑车🚀
                    <br>
                    暂时目前的奋斗目标，后续待定...
                </p>
            </div>
        </div>


        <!-- 留言区域 -->
        <div class="ui bottom attached segment">
            <div id="comment-container" class="ui teal segment">
                <div th:fragment="commentList" class="commentList">
                    <div class="ui small comments">
                        <h3 class="ui dividing header">
                            <font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;">评论</font>
                            </font>
                        </h3>
                        <div class="comment" th:each="comment:${comments}">
                            <a class="avatar">
                                <img th:src="${comment.picture}" id="dog" src="../static/image/img.png">
                            </a>
                            <div class="content">
                                <a class="author">
                                    <font style="vertical-align: inherit;">
                                        <font th:text="${comment.name}" style="vertical-align: inherit;">马特</font>
                                    </font>
                                </a>
                                <div class="metadata">
                  <span class="date">
                    <font style="vertical-align: inherit;">
                      <font style="vertical-align: inherit;" th:text="${comment.createTime}">今天下午 5 点 42 分</font>
                    </font>
                  </span>
                                </div>
                                <div class="text">
                                    <font style="vertical-align: inherit;">
                                        <font  th:text="${comment.content}" style="vertical-align: inherit;">
                                            多么艺术！
                                        </font>
                                    </font>
                                </div>
                                <div class="actions">
                                    <a class="reply">
                                        <font style="vertical-align: inherit;">
                                            <font onclick="reply(this)" th:attr="data-commentid=1,data-commentnickname=1" data-commentid="1" data-commentnickname="Matt" style="vertical-align: inherit;">回复</font>
                                        </font>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 提交留言区域 -->
            <div id="comment-form" class="ui form z">
                <input type="hidden" name="blogId" th:value="1">
                <input type="hidden" name="parentCommentId" th:value="1">
                <div class="field">
                    <textarea name="content" placeholder="请输入评论信息..."></textarea>
                </div>
                <div class="fields">
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <div class="ui left icon input">
                            <i class="user icon"></i>
                            <input type="text" name="name" placeholder="姓名">
                        </div>
                    </div>
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <div class="ui left icon input">
                            <i class="mail icon"></i>
                            <input type="text" name="email" placeholder="邮箱">
                        </div>
                    </div>
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <button type="button" id="comment-btn" class="ui teal button m-mobile-wide"><i
                                class="edit icon"></i> 发布
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 底部 -->
<footer class="ui attached">
    <div class="ui container">
        <center>
            <p>Copyright © 2022 By Meteor</p>
        </center>
    </div>
</footer>


<th:block th:replace="_fragments :: script">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script src="../static/lib/prism/prism.js"></script>
    <script src="../static/lib/tocbot/tocbot.min.js"></script>
    <script src="../static/lib/qrcode/qrcode.min.js"></script>
</th:block>


<script th:inline="javascript">

    //评论表单验证
    $('.ui.form').form({
        fields: {
            content: {
                indentifier: 'content',
                rules: [{
                    type: 'empty',
                    prompt: '标题：请输入博客标题',
                }]
            },
            name: {
                indentifier: 'name',
                rules: [{
                    type: 'empty',
                    prompt: '标题：请输入博客内容',
                }]
            },
        }
    });

    $('#comment-btn').click(function () {
            postData();
    });

    function postData() {
        $("#comment-container").load(/*[[@{/commentOne}]]*/"", {
            "blogId": $("[name='blogId']").val(),
            "parentCommentId": $("[name='parentCommentId']").val(),
            "content": $("[name='content']").val(),
            "name": $("[name='name']").val(),
            "email": $("[name='email']").val(),
        }, function (responseText, statusText, xhr) {
            $(window).scrollTo($('#comment-container'),500);
            clearContent();
        });
    }

    function clearContent() {
        $("[name='content']").val('');
        $("[name='name']").val('');
        $("[name='parentCommentId']").val(-1);
        $("[name='content']").attr("placeholder","请输入评论信息...");
    }

    function reply(obj) {
        var commentId = $(obj).data('commentid');
        var commentNickname = $(obj).data('commentnickname');
        $("[name='content']").attr("placeholder","@"+commentNickname).focus();
        $("[name='parentCommentId']").val(commentId);
        $(window).scrollTo($('#comment-form'),500);
    }


</script>


</body>
</html>